<template>
	<view class="t-flex area c3" :style="{
		height:menu.height+'px',
		top:menu.top+'px'
	}" @click="chooseLocation">
	<image src="../../static/icons/07.png" mode="aspectFit" class="icon"></image>
		{{store.district}} 
	</view>
</template>

<script setup lang="ts">
import { cityDetail } from '../../api';
import { useStore } from '../../store';
	
	const store = useStore()
	
	let menu = uni.getMenuButtonBoundingClientRect()
	
	
	const chooseLocation = ()=>{
		uni.chooseLocation({
			success(e) {
				store.getRegeo(e.latitude,e.longitude).then(async res=>{
					store.district = res.area
					store.city = res.city
					let res2 = await cityDetail(res.area)
					store.area_id = res2.id
					uni.$emit('locationUpdate')
				})
			},
			fail(e) {
				console.log(e,'fail')
			}
		})
	}
	
	
</script>

<style scoped lang="scss">
	.area{
		position: absolute;
		z-index: 100;
		left: 30rpx;
		.icon{
			width: 32rpx;
			height: 32rpx;
			margin-right: 16rpx;
		}
	}

</style>